<template>
  <a-spin :spinning="loading">
    <div class="collect-content">
      <div class="collect-wrapper card-comment-wrapper" v-if="collectList && collectList.length">
        <div
          class="collect-item card-comment-item"
          v-for="(item, index) in collectList"
          :key="item.receptionApplyId + index.toString()"
        >
          <div class="list-item-left ellipis-1" style="width: 90%;">
            <i
              :class="
                [
                  'theme-less-background-color',
                  'icon_iconfont',
                  item.icon && item.icon !== '#' ? icon.icon : 'el-icon-picture-outline'
                ].join(' ')
              "
            ></i>
            <span style="font-size: 14px;">{{ item.menuName }}</span>
          </div>
          <div style="width: 10%;text-align: right;">
            <el-tooltip placement="top" :content="item.applyType == 1 ? '取消收藏' : '收藏'">
              <a-icon
                type="heart"
                style="font-size: 19px;line-height: 30px;"
                class="theme-less-font-color"
                :theme="item.applyType == 1 ? 'filled' : 'outlined'"
                @click="addToFavorite(item)"
              />
            </el-tooltip>
          </div>
        </div>
      </div>
      <a-empty description="暂无数据" class="empty" style="padding: 20px;" v-else />
    </div>
  </a-spin>
</template>

<script>
  import { userApplyList, collectionUserApply } from '@client/addHome/service'
  export default {
    name: 'CollectionMenu',
    data() {
      return {
        loading: false,
        //  收藏列表
        collectList: []
      }
    },
    methods: {
      // 添加/取消 进我的收藏
      addToFavorite(object) {
        const result = this.$httpHandler(collectionUserApply, {
          applyType: Number(object.applyType) === 1 ? 2 : 1,
          receptionApplyId: object.receptionApplyId
        })
        if (result) {
          this.$set(object, 'applyType', Number(object.applyType) === 1 ? 2 : 1)
        }
      },
      notify() {
        this.$httpResultHandler(userApplyList).then(res => {
          this.collectList = res.data
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .collect-content {
    padding: 5px 0px;
  }
  .card-comment-wrapper {
    padding: 5px 0px;
    line-height: 30px;
    .card-comment-item {
      display: flex;
      cursor: pointer;
      padding: 5px 10px;
      justify-content: space-between;

      & > span {
        display: inline-block;
        line-height: 30px;
        font-size: 12px;
      }
    }
  }

  .icon_iconfont {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    margin-right: 5px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    background-color: #3672fe;
  }
  .list-item-left:active {
    background-color: rgba(233, 233, 233, 0.4);
  }
</style>
